<template>
	<view class="page">
		<view class="bg">
			<image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/ringks.png"></image>
			<view class="null"
				:style="{ height: selectData.statusBarHeight + 'px', width: selectData.screenWidth + 'px' }">
			</view>
			<view class="title flex"
				:style="{ height: selectData.navBarHeightTitle + 'px', top: selectData.statusBarHeight + 'px' }">
				<view @click="goBack">
					<image class="w-28h-48" src="https://cdn.oss.bon-top.cn/static_bc/images/back_w.png"></image>
				</view>
				<view style="margin-left: 210rpx" class="ft1 c-ff">白菜排行榜</view>
			</view>
		</view>
		<view class="context">
			<view class="flex-center">
				<view :class="{ active: sletTab == index }" class="tabList mr-20 ft ft-28"
					v-for="(item, index) in tabList" :key="index" @click="seclctTab(index)">{{ item }}</view>
			</view>
			<view class="mt-20">
				<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="getProductData">
					<view class="project pd-12" @tap="goProjectDetail(item.id)" v-for="(item, index) in productList"
						:key="item.id">
						<view class="flex">
							<view class="left" style="flex-shrink: 0;">
								<image class="wh-100 bd-r40" :src="item.cover" mode="aspectFill">
								</image>
							</view>
							<view class="right ml-20">
								<view class="top flex mt-30">
									<view class="tip ft ft-20 flex-center mr-10 fs0"
										v-for="(tag, index) in item.recommends_show" :key="index">
										{{ tag }}
									</view>
									<view style="width: 240rpx;" class="title  ft-lue ft ft-32 fw-800">{{
										item.name
									}}</view>
								</view>
								<view class="midel">
									<text class="ft mr-10 c-99" v-for="(tag, index) in item.tags" :key="index">
										<text v-if="index === item.tags.length - 1">{{ tag.name }}</text>
										<text v-else> {{ tag.name + " | " }}</text>
									</text>
								</view>
								<view class="domn flex mt-20">
									<view class="price">
										<view class="ft">白菜价</view>
										<text style="
								  font-weight: 800;
								  font-size: 20rpx;
								  color: #333333;
								  margin-top: 8rpx;
								">
											{{ item.currency_symbol }}
											<text style="
								    font-family: 'DIN COROS';
								    font-weight: 400;
								    font-size: 28rpx;
								    color: #333333;
								  ">
												{{ item.bc_price_show }}</text>
											{{ item.bc_price_unit }}</text>
									</view>
									<image class="wh-37" style="margin: 0 20rpx;"
										src="https://cdn.oss.bon-top.cn/static_bc/images/price1.png">
									</image>
									<view class="price2">
										<view class="ft">同行价</view>
										<text v-if="item.peer_price_show"
											style="font-weight: 800; font-size: 20rpx; color: #999999">
											{{ item.currency_symbol }}
											<text style="
												font-family: 'DIN COROS';
												font-weight: 400;
												font-size: 28rpx;
												color: #999999;
											">
												{{ item.peer_price_show }}</text>
											{{ item.peer_price_unit }}</text>
										<text v-else style="font-weight: 800; font-size: 20rpx; color: #999999">
											{{ "暂无价格" }}
										</text>
									</view>
								</view>
							</view>
						</view>
						<view class="foot auto mt-20 flex-bwt">
							<view class="arrow ml-12">
								<text class="ft" v-if="item.brand_info">{{ "项目方:" + item.brand_info.name }}</text>
								<text class="ft" v-else>{{ "项目方:暂无数据" }}</text>
							</view>
							<view class="down flex mr-12">
								<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon12.png">
								</image>
								<text class="ft" style="margin-left: 8rpx" v-if="item.country_info">
									{{ item.country_info.name }}</text>
								<text class="ft" style="margin-left: 8rpx" v-else> {{ '暂无数据' }}</text>
							</view>
						</view>
						<view class="absu" v-if="item.is_sellout == 1">
							<image class="iamg" src="https://cdn.oss.bon-top.cn/static_bc/images/slodOut.png"></image>
						</view>
						<view class="xuhao">
							<image v-if="index === 0" class="wh-100"
								src="https://cdn.oss.bon-top.cn/static_bc/images/num_1.png"></image>
							<image v-if="index === 1" class="wh-100"
								src="https://cdn.oss.bon-top.cn/static_bc/images/num_2.png"></image>
							<image v-if="index === 2" class="wh-100"
								src="https://cdn.oss.bon-top.cn/static_bc/images/num_3.png"></image>
						</view>
					</view>

					<view class="com-empty" v-if="productList.length == 0">暂无数据</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script lang="js" setup>
import {
	ref,
	onMounted
} from 'vue';
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";
import {
	onLoad,
	onReachBottom,
	onReady
} from '@dcloudio/uni-app';
import ComProjectList from "@/components/comProjectList.vue";

const tabList = ref(['咨询排行榜', '收藏排行榜', '查看排行榜'])
const sletTab = ref(0)
const goBack = () => {
	uni.navigateBack()
}

const seclctTab = (idx) => {
	sletTab.value = idx
	productPage.value = 1
	productList.value = []
	productLoading.value = true
	getProductData()
}


//推荐项目
const productPage = ref(1)
const productList = ref([])
const productLoading = ref(true)
const getProductData = () => {
	if (!productLoading.value) {
		return
	}
	uni.showLoading()
	productLoading.value = false
	utils
		.request(
			api.getProductList, {
			page: productPage.value,
			pageSize: 5,
			orderBy: ['consult_num', 'collect_num', 'view_num'][sletTab.value],
			orderType: 'desc'
		},
			"post"
		)
		.then((res) => {
			productPage.value++
			if (res.data.items.length > 0) {
				productList.value = productList.value.concat(res.data.items)
			}
			if (productPage.value <= res.data.pageInfo.totalPage) {
				productLoading.value = true
			}
			uni.hideLoading()
		});
};

const goProjectDetail = (id) => {
	uni.navigateTo({
		url: `/subpackage/immigration/immigration?id=${id}`,
	});
}

onLoad((options) => {
	if (options.index) sletTab.value = options.index
	console.log('options.index', options.index)
	getProductData()
})
const selectData = ref({})
onReady(() => {
	const systemInfo = uni.getSystemInfoSync()
	let statusBarHeight = systemInfo.statusBarHeight
	let screenWidth = systemInfo.screenWidth
	let menuButtonInfo = 0
	// #ifdef MP
	menuButtonInfo = wx.getMenuButtonBoundingClientRect();
	// #endif
	let navHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height

	selectData.value = {
		screenWidth: screenWidth,
		statusBarHeight: statusBarHeight,
		navBarHeightTitle: navHeight,//导航文字模块总高

	}
})
</script>
<style lang="scss" scoped>
.bg {
	width: 750rpx;
	height: 406rpx;
	background: #333333;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	position: relative;

	.null {
		position: absolute;
		top: 0;
	}

	.title {
		position: absolute;
		top: 68rpx;
		width: 100%;
		// border: 2rpx solid red;
		padding-left: 34rpx;
	}
}

.context {
	width: 100%;
	padding: 30rpx;
	box-sizing: border-box;
	// height: 1218rpx;
	background: #333333;

	.tabList {
		width: 180rpx;
		height: 72rpx;
		background: #7a7a7a;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		color: #d1d1d1;
		text-align: center;
		line-height: 72rpx;
	}

	.active {
		background: #ffffff;
		color: #333333;
	}

	.scroll-Y {
		height: 1112rpx;
	}

	.project {
		margin: auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		width: 650rpx;
		height: 408rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #f1f1f1;
		position: relative;

		.xuhao {
			position: absolute;
			top: 0;
			left: 20rpx;
			width: 52rpx;
			height: 62rpx;
		}

		.absu {
			position: absolute;
			top: 30rpx;
			right: 0rpx;
			opacity: 0.3;

			.iamg {
				width: 155rpx;
				height: 138rpx;
			}
		}

		.left {
			width: 222rpx;
			height: 274rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
		}

		.right {
			flex: 1;
			height: 274rpx;

			.top {
				.tip {
					// width: 88rpx;
					display: inline-block;
					line-height: 36rpx;
					box-sizing: border-box;
					height: 36rpx;
					background: linear-gradient(88deg, #dbf046 0%, #ffee7e 100%);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin-right: 4rpx;
					padding: 0 4rpx;

				}

				.title {
					margin-left: 6rpx;
				}
			}

			.domn {
				.price {
					// width: 148rpx;
					height: 92rpx;
					background: linear-gradient(90deg,
							#fff5f3 0%,
							rgba(255, 245, 243, 0) 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}

				.price2 {
					// width: 148rpx;
					height: 92rpx;
					background: #fff;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}
			}


		}

		.foot {
			width: 610rpx;
			height: 74rpx;
			background: linear-gradient(92deg,
					#f8f8f8 0%,
					rgba(248, 248, 248, 0) 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
		}
	}
}
</style>